<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>User Management</title>
	<style>
		.userInfoWrapper {
			float: left;
			width: 100%;
			/* background: yellow; */
		}

		.userList {
			float: left;
			margin-left: -300px;
			width: 300px;
			background-color: red;
		}

		.userInfo {
			padding-top: 50px;
			margin-right: 310px;
			/* background-color: green; */
		}

		.label {
			display: inline-block;
			text-align: right;
			padding-right: 15px;
			width: 300px;
		}

		.userInfo div {
			text-align: center;
			margin-top: 15px;
			min-width: 500px;
		}

		.userInfo input, .userInfo .label {
			font-size: 1.5em;
		}

		input[type="button"] {
			background-image: -webkit-linear-gradient(top, #444, #999);
			background-image: -moz-linear-gradient(top, #444, #999);
			background-image: -ms-linear-gradient(top, #444, #999);
			background-image: -o-linear-gradient(top, #444, #999);
			background-image: linear-gradient(top, #444, #999);
			font-size: 1em;
			height: 50px;
			width: 100px;
		}

	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
	<script>
		$(function() {
			alert("haha");
		});
	</script>
</head>
<body>
	<div class="main">
		<div class="userInfoWrapper">
			<div class="userInfo">
				<div>
					<label for="username" class="label">What's your name?</label>
					<input type="text" id="username" />
				</div>
				<div>
					<label for="password" class="label">Enter your password</label>
					<input type="text" id="password" />
				</div>
				<div>
					<label for="retypePassword" class="label">Re-enter your password</label>
					<input type="text" id="retypePassword" />
				</div>
				<div>
					<label for="email" class="label">What's your email address?</label>
					<input type="text" id="email" />
				</div>
				<div>
					<label for="address" class="label">Where do you live?</label>
					<input type="text" id="address" />
				</div>
				<div>
					<input type="button" value="Submit" />
					<input type="button" value="Reset" />
				</div>
			</div>
		</div>
		<div class="userList">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, inventore veritatis dolores voluptates ut molestiae maiores aspernatur ad nisi quas voluptas minus rerum non labore nihil. Qui, officia, ratione, quae, fuga optio unde voluptatem laborum quos recusandae commodi expedita sit esse est nihil culpa obcaecati libero perferendis totam architecto eum vero dolores asperiores saepe similique mollitia maiores debitis nisi. Recusandae, architecto, tempora quidem assumenda repellendus voluptatibus quo laudantium suscipit laboriosam sit quisquam sed repudiandae minus possimus eos magni dolorum quod praesentium excepturi asperiores aut saepe reprehenderit explicabo odio numquam nisi quia nesciunt perferendis provident adipisci labore iste beatae molestias. Eligendi.
		</div>
	</div>
</body>
</html>